<template>
    <HeaderCom>
        <template v-slot:left>
            <svg class="icon" @click="chuXian">
                <use xlink:href="#icon-danlieliebiao"></use>
            </svg>
        </template>
        <template v-slot:center>
            <div class="center">
                <router-link to="/boke-view/ting-ting">听听</router-link>
                <router-link to="/boke-view">推荐</router-link>
                <router-link to="/boke-view/gu-shi">故事</router-link>
            </div>
         </template>
        <template v-slot:right>
            <svg class="icon">
                <use xlink:href="#icon-jia"></use>
            </svg>
        </template>
    </HeaderCom>
    <router-view/>
    <AsideLeft ref="asideleft"/>
</template>

<script>
    import HeaderCom from "../components/header/HeaderCom.vue";
    import AsideLeft from "../components/aside/AsideLeft.vue";
    export default {
        name: "BoKeView",
        components:{
            HeaderCom,
            AsideLeft
        },
        methods:{
            chuXian(){
                this.$refs.asideleft.yiDong()
            },
        }
    }
</script>

<style scoped>
    .icon{
        width: 35px;
        height: 30px;
        margin-top: 10px;
    }
    .center{
        width: 70%;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        margin-top: 10px;
    }
    .center a{
        color: grey;
    }
    a.router-link-active.router-link-exact-active{
        color: black;
        font-weight: bold;
        border-bottom: 5px solid red;
        border-bottom-right-radius: 2.5px;
        border-bottom-left-radius: 2.5px;
    }
</style>